<template>
  <div id="face">
    <div class="img">
      <img :src="$store.state.headImgUrl" alt="">
    </div>
    <div id="info">
      <h3 id="name">
        {{showName}}
        <notice :num="$store.state.notice" v-show="showNotice"></notice>
      </h3>
      <h4>
        记忆力: <span class="color-orange">{{$store.state.memory}}</span> 经验值: <span class="color-green">{{$store.state.xp}}</span>
      </h4>
    </div>
    <div class="clear"></div>
  </div>
</template>

<script>
  import notice from '../components/notice.vue'
  export default{
    name:'face',
    components:{notice},
    computed:{
      showName:function(){
        let name = this.$store.state.name;
        if(name.length > 8){
          return name.slice(0,8)+'...';
        }
        return name;
      },
      showNotice:function(){
        if(this.$store.state.notice <=0){
          return false;
        }
        return true;
      }
    },
    mounted:function(){
      if(this.showName.length < 5){
        document.getElementById('name').style.fontSize = "150%";
      }
    }
  }
</script>

<style scoped lang="less">
  div.img{
    float:left;
    width:100px;
    height:100px;
  }
  img{width:100px;}
  #info{
    float:left;
    padding-left:10px;
  }
  h3{line-height:40px;}
  h4{
    line-height:30px;
    span{
      margin-right:15px;
    }
  }


</style>
